<template>
     <pageTabelLayout>
        <template #pageHeader>
    <div class="search-form isheader" v-if="headerShow">
        <div>
            <a-form :model="dataForm" layout="inline" size="small">
                <CorporateSectorCascader @changeCascader="changeCascader" :configCascader="configCascader"/>
                <a-form-item label="开单日期" :style="{ width: '270px' }" label-col-flex="80px">
                    <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.beginDate" allow-clear />
                </a-form-item>
                <a-form-item label="至" :style="{ width: '270px' }" label-col-flex="80px">
                    <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.endDate" allow-clear />
                </a-form-item>
                <a-form-item label="班次" :style="{ width: '270px' }" label-col-flex="80px">
                    <a-select popup-container="html"  class="bacClass" :allowClear="true" v-model="dataForm.workteam" :filter-option="false"
                        allow-search>
                        <a-option>A班</a-option>
                        <a-option>B班</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="员工工号" :style="{ width: '270px' }" label-col-flex="80px">
                    <a-input class="bacClass" v-model="dataForm.userCode" allow-clear></a-input>
                </a-form-item>
                <a-form-item label="员工姓名" :style="{ width: '270px' }" label-col-flex="80px">
                    <a-input class="bacClass" v-model="dataForm.userName" allow-clear></a-input>
                </a-form-item>
            </a-form>
        </div>

    </div>
    <div style="text-align: end;">
        <Toolbar :items="toolbarList" @select="selectHandler" @export="exports">
        </Toolbar>
    </div>
    <div class="my-divisders">
        <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
    </div>
</template>
    <!-- <div class="gang"></div> -->
    <template #pageTabel>
        <a-tabs   :lazy-load="true" :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
            <a-tab-pane title="扫描工序产量工资明细" :key="1">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                    :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination.pageSize" :current="pagination.page" />
            </a-tab-pane>
            <a-tab-pane title="染色产量工资明细" :key="2">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady2"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef2" class='ag-theme-alpine' :rowData="tableDataList2"
                    :columnDefs="tc2" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total2" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination2.pageSize" :current="pagination2.page" />
            </a-tab-pane>

            <a-tab-pane title="成检查布产量工资明细" :key="3">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady3"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef3" class='ag-theme-alpine' :rowData="tableDataList3"
                    :columnDefs="tc3" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total3" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination3.pageSize" :current="pagination3.page" />
            </a-tab-pane>
            <a-tab-pane title="化工仓工资明细" :key="4">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady4"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef4" class='ag-theme-alpine' :rowData="tableDataList4"
                    :columnDefs="tc4" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total4" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination4.pageSize" :current="pagination4.page" />
            </a-tab-pane>
            <a-tab-pane title="司机运输路线计件工资明细" :key="5">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady5"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef5" class='ag-theme-alpine' :rowData="tableDataList5"
                    :columnDefs="tc5" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total5" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination5.pageSize" :current="pagination5.page" />
            </a-tab-pane>
            <a-tab-pane title="仓库扫描计件工资明细" :key="6">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady6"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef6" class='ag-theme-alpine' :rowData="tableDataList6"
                    :columnDefs="tc6" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total6" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination6.pageSize" :current="pagination6.page" />
            </a-tab-pane>
        </a-tabs>
    </template>
</pageTabelLayout>
</template>
<script setup lang="ts">
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { tc, tc3, tc2, tc4, tc5, tc6 } from '../index'
import { EXELTABLE } from '@/utils/exportEXCEL'
import { pagingList } from "@/api/paging";
import { ref, reactive, onMounted, onActivated, onUnmounted, nextTick } from "vue";
const toolbarList: any = ref(['查询', '导出'])
let isIDs: any = ref(1);
onMounted(() => {
    // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
    // doRefresh();
    // selCxAll({});
    // 切换tap到本页面执行的方法
    // emitter.on("DevelopSampleRegistrationListDemo", () => {
    //     // selCxAll({});
    //     doRefresh();
    // });
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight - 100;
    }
});

function PageSize(val: any) {
    if (tabsKeys.value == 1) {
        pagination.page = val
        doRefresh();
    } else if (tabsKeys.value == 2) {
        pagination2.page = val
        doRefresh2();
    } else if (tabsKeys.value == 3) {
        pagination3.page = val
        doRefresh3();
    } else if (tabsKeys.value == 4) {
        pagination4.page = val
        doRefresh4();
    } else if (tabsKeys.value == 5) {
        pagination5.page = val
        doRefresh5();
    } else if (tabsKeys.value == 6) {
        pagination6.page = val
        doRefresh6();
    }
}

function change(val: any) {
    if (tabsKeys.value == 1) {
        pagination.pageSize = val
        doRefresh();
    } else if (tabsKeys.value == 2) {
        pagination2.pageSize = val
        doRefresh2();
    } else if (tabsKeys.value == 3) {
        pagination3.pageSize = val
        doRefresh3();
    } else if (tabsKeys.value == 4) {
        pagination4.pageSize = val
        doRefresh4();
    } else if (tabsKeys.value == 5) {
        pagination5.pageSize = val
        doRefresh5();
    } else if (tabsKeys.value == 6) {
        pagination6.pageSize = val
        doRefresh6();
    }
}


const headerShow = ref(true)

const tableDataList = ref([])
const tableDataList2 = ref([])
const tableDataList3 = ref([])
const tableDataList4 = ref([])
const tableDataList5 = ref([])
const tableDataList6 = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}

const gridOption2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
}
const gridOption3 = ref()
const gridReady3 = (params: any) => {
    gridOption3.value = params.api
}
const gridOption4 = ref()
const gridReady4 = (params: any) => {
    gridOption4.value = params.api
}
const gridOption5 = ref()
const gridReady5 = (params: any) => {
    gridOption5.value = params.api
}
const gridOption6 = ref()
const gridReady6 = (params: any) => {
    gridOption6.value = params.api
}

const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}

const defaultColDef2 = {
    sortable: true,
    resizable: true,
    filter: true,
}
const defaultColDef3 = {
    sortable: true,
    resizable: true,
    filter: true,
}
const defaultColDef4 = {
    sortable: true,
    resizable: true,
    filter: true,
}
const defaultColDef5 = {
    sortable: true,
    resizable: true,
    filter: true,
}
const defaultColDef6 = {
    sortable: true,
    resizable: true,
    filter: true,
}

const localeText1: any = ref(localeText)

const dataForm = reactive<{
    deleteState: any
    beginDate: any
    endDate: any
    workteam: any
    carPlate: any
    departmentCode: any
    departmentName: any
    userCode: any
    userName: any
    size: any
    page: any
}>({
    deleteState: 0,
    beginDate: '',
    endDate: '',
    workteam: '',
    carPlate: '',
    departmentCode: '',
    departmentName: '',
    userCode: '',
    userName: '',
    size: 10,
    page: 1
});
const pageData = reactive<{
    pageLoading: boolean,
    rHeight: number,
}>({
    pageLoading: false,
    rHeight: 0,
});
const selectHandler = () => {
    if (tabsKeys.value == 1) {
        doRefresh()
    } else if (tabsKeys.value == 2) {
        doRefresh2()
    } else if (tabsKeys.value == 3) {
        doRefresh3()
    } else if (tabsKeys.value == 4) {
        doRefresh4()
    } else if (tabsKeys.value == 5) {
        doRefresh5()
    } else if (tabsKeys.value == 6) {
        doRefresh6()
    }
}
const tabsKeys = ref(1)
const tabsChanges = (e: any) => {
    tabsKeys.value = e
    // if (e == 1) {
    //     toolbarList.value = ['查询', '导出']
    // } else if (e == 2) {
    //     toolbarList.value = ['查询', '导出']
    // }
}
const total = ref(0);
const total2 = ref(0);
const total3 = ref(0);
const total4 = ref(0);
const total5 = ref(0);
const total6 = ref(0);
const pagingList1: any = ref(pagingList)
function doRefresh() {
    pageData.pageLoading = true
    dataForm.page = pagination.page
    dataForm.size = pagination.pageSize
    post({
        url: "/dwPc/PostPiece/getUserYieldWageOne",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption.value.setRowData(data.list)
                total.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
function doRefresh2() {
    pageData.pageLoading = true
    dataForm.page = pagination2.page
    dataForm.size = pagination2.pageSize
    post({
        url: "/dwPc/PostPiece/getUserYieldWageTwo",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption2.value.setRowData(data.list)
                total2.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
function doRefresh3() {
    pageData.pageLoading = true
    dataForm.page = pagination3.page
    dataForm.size = pagination3.pageSize
    post({
        url: "/dwPc/PostPiece/getUserYieldWageThree",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption3.value.setRowData(data.list)
                total3.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
function doRefresh4() {
    pageData.pageLoading = true
    dataForm.page = pagination4.page
    dataForm.size = pagination4.pageSize
    post({
        url: "/dwPc/PostPiece/getUserYieldWageFour",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption4.value.setRowData(data.list)
                total4.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
function doRefresh5() {
    pageData.pageLoading = true
    dataForm.page = pagination5.page
    dataForm.size = pagination5.pageSize
    post({
        url: "/dwPc/PostPiece/getUserYieldWageFive",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption5.value.setRowData(data.list)
                total5.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
function doRefresh6() {
    pageData.pageLoading = true
    dataForm.page = pagination6.page
    dataForm.size = pagination6.pageSize
    post({
        url: "/dwPc/PostPiece/getUserYieldWageSix",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption6.value.setRowData(data.list)
                // gridOption6.value.setRowData(data)
                total6.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
const pagination = usePagination(doRefresh);
const pagination2 = usePagination(doRefresh2);
const pagination3 = usePagination(doRefresh3);
const pagination4 = usePagination(doRefresh4);
const pagination5 = usePagination(doRefresh5);
const pagination6 = usePagination(doRefresh6);
const table = useTable();
// 导出
const exports1 = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc, gridOption.value.getSelectedRows(), '扫描工序产量工资明细')
    }

}
const exports2 = () => {
    if (gridOption2.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc2, gridOption2.value.getSelectedRows(), '染色产量工资明细')
    }

}
const exports3 = () => {
    if (gridOption3.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc3, gridOption3.value.getSelectedRows(), '成检查布产量工资明细')
    }

}
const exports4 = () => {
    if (gridOption4.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc4, gridOption4.value.getSelectedRows(), '化工仓工资明细')
    }

}
const exports5 = () => {
    if (gridOption5.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc5, gridOption5.value.getSelectedRows(), '司机运输路线计件工资明细')
    }

}
const exports6 = () => {
    if (gridOption6.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc6, gridOption6.value.getSelectedRows(), '仓库扫描计件工资明细')
    }

}
const exports = () => {
    if (tabsKeys.value == 1) {
        exports1()
    } else if (tabsKeys.value == 2) {
        exports2()
    } else if (tabsKeys.value == 3) {
        exports3()
    } else if (tabsKeys.value == 4) {
        exports4()
    } else if (tabsKeys.value == 5) {
        exports5()
    } else if (tabsKeys.value == 6) {
        exports6()
    }
}
const changeCascader = (o: any) => {
    // console.log(o, '2222222222222');
    dataForm.departmentCode = o.sectorId,
        dataForm.departmentName = o.sectorLabel

}
let configCascader = ref<{}>({
    corporateWidth: '215px', //公司宽度
    sectorWidth: '215px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector',
    sectorName: '部门', //部门label
    corporateNameLabelWidth: '80px', //选择公司label宽
    sectorLabelWidth: '80px',
})
</script>
<script lang="ts">
export default {
    name: "ProductionSalaryDetailDemo",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.DivFit {
    width: 100%;
    height: 20px;
    margin-left: 20px;
}

.DivFit div {
    float: left;
    width: 200px;
}

.isTable1 {
    margin: 50px;
    width: 90%;
    // margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;

    td {
        border: 1.2px solid #ccc;
    }

    th {
        border: 1.2px solid #ccc;
    }
}
</style>

